<template>
  <div class="container">
    <el-dialog
      :visible.sync="isShowDialog"
      width="600px"
      :modal="false"
      :close-on-click-modal="false"
      class="thisblack-bgc"
    >
      <span slot="title">
        <p class="head-title">设置展位简介</p>
      </span>
      <div class="content">
        <div class="tip-group">
          <p class="p-tip">注意：</p>
          <p class="p-tip">1.公司简介内的超链接在保存后将被自动清除</p>
          <p class="p-tip">2简介内请勿填写联系方式等相关信息，保存后将无法在前台展示</p>
          <p class="p-tip">3.内容请遵守相关的法律法规</p>
        </div>
        <div style="width: 560px;margin: 0 auto">
          <Ueditor ref="ue" :value="defaultMSG" @ready="editorReadyWap" />
        </div>
        <!-- <div class="bind-video">
          <span>绑定展位介绍视频</span>
          <el-button>选择视频</el-button>
        </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button>预览</el-button> -->
        <el-button type="primary" @click="getChangeLogo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import Ueditor from '@/components/UEditor'
export default {
  name: 'SuperAdmin',
  components: { Ueditor },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    boothname: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      defaultMSG: '',
      ruleForm: {
        imnote: ''
      },
      rules: {
        imnote: [{ required: true, message: '请输入展位名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    isShowDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('closeEvents', 'isBoothRichText', val)
      }
    }
  },
  created () {
    this.ruleForm.imnote = this.boothname.imnote ? JSON.parse(JSON.stringify(this.boothname.imnote)) : ''
  },
  methods: {
    closeDialog () {
      this.$emit('closeEvents', 'isBoothRichText', false)
    },
    editorReadyWap (instance) {
      instance.setContent(this.ruleForm.imnote)
      instance.addListener('contentChange', () => {
        this.ruleForm.imnote = instance.getContent()
      })
    },
    async getChangeLogo () {
      await api.imlist.updateImlist(this.ruleForm)
      this.$emit('closeEvents', 'isBoothRichText', false)
      this.$message({ message: '设置成功', type: 'success' })
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .container {
    .thisblack-bgc {
      background: rgba(0,0,0,.5);
      z-index: 1005!important;
    }
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding: 12px 16px;
        background: #F5F8FC;
        .head-title {
          font-size: 16px;
          color: #202933;
          font-weight: 500;
          line-height: 1.5;
        }
        .head-tip {
          font-size: 14px;
          color: #B9C0C7;
          font-weight: 400;
          line-height: 1.5;
          a{
            cursor: pointer;
            color: #0C7FF2;
          }
        }
      }
      .el-dialog__body {
        .content {
          .tip-group {
            margin-bottom: 25px;
            .p-tip {
              font-size: 12px;
              color: #7E8790;
              line-height: 1.5;
            }
          }
          .bind-video {
            width: 100%;
            margin: 12px auto;
            span {
              padding: 0 16px;
              font-size: 14px;
              color: #202933;
            }
            .el-button {
              padding: 8px 16px;
              border: 1px solid #0C7FF2;
              span {
                color: #0C7FF2;
                font-weight: 400;
              }
            }
          }
        }
      }
      .el-dialog__footer {
        padding: 24px 0;
        text-align: center;
        border-top: 1px solid #E5EAF0;
        .el-button {
          padding: 8px 16px;
        }
      }
    }
  }
</style>
